<template>
  <div class="amap-page-container">
    <el-amap vid="amapDemo" :plugin="plugin" :zoom="zoom" :center="center" class="amap-demo">
      <el-amap-circle-marker v-for="marker in markers" :center="marker.center" :radius="marker.radius" :fill-color="marker.fillColor" :fill-opacity="marker.fillOpacity" :events="marker.events" :key="marker.id"> 
      </el-amap-circle-marker>
    </el-amap>
    <!-- 弹出窗口 -->
    <div class="dialog-wrap">
      <el-dialog title="基础信息详情" :visible.sync="dialog_1">
          <table class="moni_table">
            <tr>
              <th data-key="name">河道</th>
              <td colspan="3">{{gridData.name}}</td>
            </tr>
            <tr>
              <th data-key="region">当前水质</th>
              <td>{{gridData.region}}</td>
              <th data-key="date1">上周水质</th>
              <td>{{gridData.date1}}</td>
            </tr>
            <tr>
              <th data-key="date2">经度</th>
              <td>{{gridData.date2}}</td>
              <th data-key="delivery">维度</th>
              <td>{{gridData.delivery}}</td>
            </tr>
            <tr>
              <th data-key="type">溶解氧DO</th>
              <td>{{gridData.type}}</td>
              <th data-key="resource">高锰酸盐指数DODMn</th>
              <td>{{gridData.resource}}</td>
            </tr>
            <tr>
              <th data-key="desc">氨氮NH3-N</th>
              <td>{{gridData.desc}}</td>
              <th data-key="key1">总磷TP</th>
              <td>{{gridData.key1}}</td>
            </tr>
            <tr>
              <th data-key='key2'>速度Transp</th>
              <td colspan="3">{{gridData.key2}}</td>
            </tr>
          </table>
          <el-tabs class="moni_tabs" v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="Do" name="first">
              <div class="chart-container">
                <chart height="100%" width="100%"/>
              </div>
            </el-tab-pane>
            <el-tab-pane label="CODMn" name="second">CODMn</el-tab-pane>
            <el-tab-pane label="NH3-N" name="third">NH3</el-tab-pane>
            <el-tab-pane label="TP" name="fourth">TP</el-tab-pane>
            <el-tab-pane label="Transp" name="five">Transp</el-tab-pane>
          </el-tabs>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import Chart from '@/components/Charts/lineMarker'
  export default {
    data () {
      return {
        zoom: 13,
        center: [106.55,29.57],
        plugin: ['ToolBar','Scale',{
            pName: 'MapType',
            defaultType: 1,
            events: {
              init(instance) {
                console.log(instance);
              }
            }
          }],
        markers: [{
          id:1,
          center: [106.55,29.57],
          radius: 20,
          fillOpacity: 1,
          fillColor: 'rgba(0,0,255,1)',
          events: {
            click: () => {
              this.dialog_1=true
            }
          }
        }],      
        // 弹窗信息
        dialog_1:false, 
        gridData: {
          name: '龙河',
          region: 'I',
          date1: 'II',
          date2: '112.88',
          delivery: '38.66',
          type: '2',
          resource: '3',
          desc: '4',
          key1:'5',
          key2:'7'
      },
      activeName: 'first',
      }
    },
    components:{
      Chart,
    },
    methods:{
      //选项卡点击事件
      handleClick(tab, event) {
        console.log(tab, event);
      }, 
    }
  };
</script>
